<template>
	<div class="task" v-permission="'app:git'">
		<div class="task-header">
			<div class="task-header-border"></div>
			<div class="task-header-title">
				<i class="task-header-title-icon el-icon-s-grid"></i>
				<h2 class="task-header-title-name">代码仓库<span v-if="storehouseForm.length>0">（{{storehouseForm.length}}）</span></h2>
			</div>
			<div class="task-header-actions">
        <el-tooltip class="item" effect="dark" content="刷新" placement="right">
          <i class="task-header-actions-icon el-icon-refresh"
             :class="[loading == true&&refresh==true?'refreshRe':'']" @click="listclick"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="上移" placement="right">
          <i class="el-icon-top upwardTitle" v-if="itemIndex != 0" @click="upClick"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="下移" placement="right">
          <i class="el-icon-bottom upwardTitle" v-if="itemIndex != 1" @click="downClick"></i>
        </el-tooltip>
			</div>
		</div>
		<div style="flex: 1;display: flex;flex-direction: column;overflow-y: auto;margin: 2px 12px" v-if="permissionTask()" v-loading="loading">
			<div class="task-content">
				<div class="task-content-item" v-for="item in storehouseForm">
					<div class="task-content-item-box">
						<div class="project-item-conent-top">
							<i class="iconfont icon-lock project-item-conent-top-icon"></i>
							<span class="project-item-conent-top-title">{{item.name}}</span>
						</div>
							<!-- <div>
								<span class="project-item-conent-top-title">{{item.createTime}}</span>
							</div> -->
						<div class="project-item-conent-bottom">
							<span class="project-item-conent-top-title">{{item.createTime}}</span>
							<!-- <span class="project-item-conent-bottom-title">{{item.personInCharge}}</span> -->
							<!-- <span class="project-item-conent-bottom-member-title">地址 {{item.gitUrl}}</span> -->
						<!-- 	<span class="project-item-conent-bottom-member-title">Forks {{item.forks}}</span>
							<span class="project-item-conent-bottom-member-title">快照</span> -->
						</div>
					</div>
				</div>
				<div style="width:100%;display: flex;align-items: center;justify-content: center;">
				<el-empty description="暂无仓库" v-if="storehouseForm.length==0"></el-empty>
				</div>
			</div>
			<div class="task-pagination">
				<!-- <pagination v-show="total>0" :total="total" :pageSizes='[20,30,40,50]' :current.sync="current" :size.sync="size" @pagination="listclick"/> -->
				<el-pagination background
			    layout="total, prev, pager, next"
			    :total="total"
				:page-size="size"
			    :current-page="current"
                @current-change="handleCurrentChange"></el-pagination>
			</div>
		</div>
			  <div v-if="permissionTask() == false">
      <el-empty description="暂无权限" :image="img"></el-empty>
    </div>
	</div>
</template>

<script>
import permissionFunc from "@/utils/permission";
import pagination from "@/components/Pagination";
import {list} from '@/api/git'
	export default {
		name: "storehouse",
		data() {
			return {
				img:require("../../../img/暂无权限.png"),
				loading: false,
				refresh: false,
				storehouseForm: [],
				current: 1,
      			size:12,
      			total: 0,
			}
		},
		components: {pagination},
		props:['itemIndex'],
		created(){
			this.listclick()
		},
		methods: {
					permissionTask(){
       	 return permissionFunc.inserted(['app:proj:list'])
      },
			handleCurrentChange(val){
				this.current=val
				this.listclick()
			},
			async listclick(){
				this.loading = true
				this.refresh = true
				let params=new URLSearchParams()
				params.append('current',this.current)
				params.append('size',this.size)
				let res= await list(params,false)
				this.storehouseForm=res.data.records
				this.total=res.data.total
				this.loading = false
				this.refresh = false
			},
			refreshClick() {
				var _this = this
				this.loading = true
				this.refresh = true
				setTimeout(function() {
					_this.loading = false
					_this.refresh = false
				}, 2000)
			},
			currentChange(data) {
				var _this = this
				this.loading = true
				setTimeout(function() {
					_this.loading = false
				}, 2000)
			},
			upClick(){
				this.$emit('upClick',this.itemIndex)
			},
			downClick(){
				this.$emit('downClick',this.itemIndex)
			}
		}
	}
</script>

<style scoped>
	.task {
		flex-grow: 1;
		height: 400px;
		display: flex;
		flex-direction: column;
		box-shadow: inset 0 0 0 1px #ecedf0;
		background-color: #fff;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		margin-bottom: 20px;
	}

	.task-header {
		flex: none;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 52px;
		padding: 0 24px;
		justify-content: space-between;
		padding-top: 10px;
		margin-top: 10px;
	}

	.task-header-border {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		border-top: 5px solid transparent;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		pointer-events: none;
		border-color: rgb(79, 211, 223);
	}

	.task-header-title {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.task-header-title-icon {
		font-size: 16px;
		margin-right: 4px;
		color: #cce2ff;
	}

	.task-header-title-name {
		min-width: 0;
		margin: 0;
		font-size: 16px;
		line-height: 24px;
		font-weight: 600;
		color: #2e405e;
	}

	.task-header-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.task-header-actions-icon {
		border-radius: 4px;
		cursor: pointer;
		color: #909aaa;
		font-size: 20px;
		line-height: 24px;
		text-align: center;
	}

	.task-content {
		/*padding: 0 12px;*/
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow: auto;
	}


	.task-pagination {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 16px;
		padding-top: 16px;
	}

	.task-content-item {
		flex-basis: 50%;
		max-width: 50%;
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 12px;
		    box-shadow: rgb(236 237 240) 0px -1px 0px 0px inset;
		padding-right: 12px;
	}

	.task-content-item-box {
		flex: 1;
	}

	.project-item-conent-top {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.project-item-conent-top-icon {
		font-size: 14px;
		color: #909aaa;
	}

	.project-item-conent-top-title {
		color: #2e405e;
		font-size: 16px;
		margin-left: 5px;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.project-item-conent-bottom {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
	}


	.project-item-conent-bottom-title {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #909aaa;
		font-size: 14px;
	}


	.project-item-conent-bottom-member-title {
		color: #909aaa;
		font-size: 14px;
		display: block;
		white-space: nowrap;
		margin-left: 10px;
	}

	.refreshRe {
		-webkit-animation: rotate 1.2s linear infinite;
		/*Safari and Chrome*/
	}

	@keyframes rotate {
		0% {

			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			/* IE 9 */
			-moz-transform: rotate(360deg);
			/* Firefox */
			-o-transform: rotate(360deg);
		}

		100% {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			/* IE 9 */
			-moz-transform: rotate(0deg);
			/* Firefox */
			-o-transform: rotate(0deg);
		}
	}

	@-webkit-keyframes rotate {
		0% {
			-moz-transform: rotate(360deg);
		}

		100% {
			-moz-transform: rotate(0deg);
		}
	}
	.upwardTitle{
		cursor: pointer;
		color: #909aaa;
		font-size: 20px;
		line-height: 24px;
		text-align: center;
		margin-left: 10px;
	}
</style>
